<template>
  <div ref="EcharRefsj1" style="width: 1500px; height: 400px"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      // option: {
      //     tooltip: {
      //         trigger: 'axis',
      //         axisPointer: {
      //             type: 'cross',
      //             crossStyle: {
      //                 color: '#999'
      //             }
      //         }
      //     },
      //     legend: {
      //         data: ['急刹车', '急转弯', '急加速']
      //     },
      //     xAxis: [
      //         {
      //             type: 'category',
      //             data: ['06-06', '06-07', '06-08', '06-09', '06-10', '06-11', '06-12'],
      //             axisPointer: {
      //                 type: 'shadow'
      //             }
      //         }
      //     ],
      //     yAxis: [
      //         {
      //             type: 'value',
      //             min: 0,
      //             max: 30,
      //             interval: 10,
      //             // axisLabel: {
      //             //     formatter: '{value} ml'
      //             // }
      //         }
      //     ],
      //     series: [
      //         {
      //             type: 'bar',
      //             name: '急刹车',
      //             // tooltip: {
      //             //     valueFormatter: function (value) {
      //             //         return value + ' ml';
      //             //     }
      //             // },
      //             data: [
      //                 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      //             ]
      //         },
      //         {
      //             name: '急转弯',
      //             type: 'bar',
      //             data: [
      //                 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      //             ]
      //         },
      //         {
      //             name: '急加速',
      //             type: 'bar',
      //             data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
      //         }
      //     ]
      // }
      option: {
        title: {
          text: "服务量统计",
          left: 100,
          textStyle: {
            fontSize: 18,
            // height: 50,
            // lineHeight: 50,
          },
        },
        grid: {
          top: 100,
        },
        xAxis: {
          data: ["1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
        },
        yAxis: {
          name: "服务量",
          top: 50,
          nameTextStyle: {
            fontSize: 16,
          },
          nameGap: 30,
        },
        series: [
          {
            name: "服务量",
            type: "bar",
            data: [160, 155, 280, 110, 160, 40, 90],
            barWidth: "20%",
            label: {
              position: "outside",
              show: true,
            },
          },
        ],
      },
    };
  },

  mounted() {
    const main1 = this.$refs.EcharRefsj1;
    const myChars1 = echarts.init(main1);
    myChars1.setOption(this.option);
    window.onresize = function () {
      //自适应大小
      myChars1.resize();
    };
    // this.option && window.addEventListener("resize", () => {
    //     myChars1.resize();
    // })
  },
};
</script>

<style lang="scss" scoped></style>